﻿.slide-button {
    --bb-slide-list-bg: #fff;
    --bb-slide-list-shadow: 0 .5rem 1rem rgba(0,0,0,.15);
    --bb-slide-list-border: var(--bs-border-width) solid var(--bs-border-color-translucent);
    --bb-slide-list-width: 260px;
    --bb-slide-list-height: 306px;
    --bb-slide-item-header-bg: var(--bs-primary);
    --bb-slide-item-header-color: #fff;
    --bb-slide-item-header-padding: 0.75rem 1rem;
    --bb-slide-item-header-border-radius: 5px 5px 0 0;
    --bb-slide-item-body-padding: .25rem 0;
    --bb-slide-item-padding: 0.25rem 1rem;
    --bb-slide-item-active-bg: #0d6efd;
    --bb-slide-item-active-color: #fff;
    --bb-slide-item-hover-bg: var(--bs-tertiary-bg);
    --bb-slide-item-hover-color: var(--bs-body-color);
    position: relative;
    display: inline-flex;
}

    .slide-button .slide-list {
        background: var(--bb-slide-list-bg);
        border-radius: var(--bs-border-radius);
        box-shadow: var(--bb-slide-list-shadow);
        overflow: hidden;
        position: absolute;
        z-index: 5;
        display: flex;
        flex-direction: column;
        transition: width .3s ease-in-out, height .3s ease-in-out;
    }

        .slide-button .slide-list:not(.is-horizontal) {
            height: 0;
            width: var(--bb-slide-list-width);
        }

        .slide-button .slide-list.is-horizontal {
            height: var(--bb-slide-list-height);
            width: 0;
        }

        .slide-button .slide-list:not(.is-horizontal).show {
            height: var(--bb-slide-list-height);
        }

        .slide-button .slide-list.is-horizontal.show {
            width: var(--bb-slide-list-width);
        }

        .slide-button .slide-list .slide-header {
            padding: var(--bb-slide-item-header-padding);
            background-color: var(--bb-slide-item-header-bg);
            color: var(--bb-slide-item-header-color);
            border-radius: var(--bb-slide-item-header-border-radius);
            display: flex;
        }

            .slide-button .slide-list .slide-header + .slide-body {
                border-radius: 0 0 var(--bs-border-radius) var(--bs-border-radius);
            }

        .slide-button .slide-list .slide-body {
            padding: var(--bb-slide-item-body-padding);
            overflow: auto;
            border-radius: var(--bs-border-radius);
            border: var(--bb-slide-list-border);
        }

        .slide-button .slide-list .btn-close {
            transition: opacity .3s linear;
        }

            .slide-button .slide-list .btn-close:hover {
                opacity: 1;
            }

        .slide-button .slide-list .slide-item {
            padding: var(--bb-slide-item-padding);
            cursor: pointer;
            white-space: nowrap;
            transition: background-color .3s linear;
        }

            .slide-button .slide-list .slide-item.active {
                background-color: var(--bb-slide-item-active-bg);
                color: var(--bb-slide-item-active-color);
            }

            .slide-button .slide-list .slide-item:hover {
                background-color: var(--bb-slide-item-hover-bg);
                color: var(--bb-slide-item-hover-color);
            }
